﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>时序专题图</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">    
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .dijitBorders {
            margin: 5px 5px 5px 5px;
            border: solid thin #9CAA9C;
            -moz-border-radius: 4px;
        }
        .labelText {
            color: #9CAA9C;
            font-size: 12pt;
            font-family: "Tahoma";
            margin: 5px;
        }
        .headerText {
            color: #9CAA9C;
            font-size: 16pt;
            font-weight: bold;
            font-family: "Tahoma";
        }
    </style>

    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map, timeSlider;
        require([
          "esri/map", "esri/layers/FeatureLayer", "esri/TimeExtent", "esri/layers/TimeInfo",
          "esri/renderers/ClassBreaksRenderer",
          "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
          "esri/dijit/editing/TemplatePicker", "esri/dijit/TimeSlider",
          "esri/renderers/TimeClassBreaksAger", "esri/renderers/TemporalRenderer",
          "dojo/parser", "dojo/_base/array", "esri/Color", "dojo/dom", "dojo/date",
          "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
        ], function (
          Map, FeatureLayer, TimeExtent, TimeInfo,
          ClassBreaksRenderer,
          SimpleMarkerSymbol, SimpleLineSymbol,
          TemplatePicker, TimeSlider,
          TimeClassBreaksAger, TemporalRenderer,
          parser, arrayUtils, Color, dom, date
        ) {
            parser.parse();

            map = new Map("map", {
                basemap: "streets",
                center: [-180, 30],
                slider: false,
                zoom: 3
            });
            map.on("load", mapLoaded);

            function mapLoaded() {
                var featureLayer = new FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0", {
                    mode: FeatureLayer.MODE_SNAPSHOT,
                    outFields: ["*"]
                });
                var timeExtent = new TimeExtent();
                var now = new Date();
                timeExtent.endTime = now;
                timeExtent.startTime = date.add(timeExtent.endTime, "day", -7);

                featureLayer.setDefinitionExpression("magnitude > 2");
                featureLayer.setTimeDefinition(timeExtent);
                featureLayer.on("load", featureLayerLoaded);

                var observationRenderer = new ClassBreaksRenderer(new SimpleMarkerSymbol(), "magnitude");
                observationRenderer.addBreak(7, 12, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 24, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100, 100, 100])), new Color([0, 0, 0, 0])));
                observationRenderer.addBreak(6, 7, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 21, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100, 100, 100])), new Color([0, 0, 0, 0])));
                observationRenderer.addBreak(5, 6, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 18, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100, 100, 100])), new Color([0, 0, 0, 0])));
                observationRenderer.addBreak(4, 5, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 15, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100, 100, 100])), new Color([0, 0, 0, 0])));
                observationRenderer.addBreak(3, 4, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 12, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100, 100, 100])), new Color([0, 0, 0, 0])));
                observationRenderer.addBreak(2, 3, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 9, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100, 100, 100])), new Color([0, 0, 0, 0])));
                observationRenderer.addBreak(0, 2, new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 6, new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([100, 100, 100])), new Color([0, 0, 0, 0])));

                var symbols = arrayUtils.map(observationRenderer.infos, function (info) {
                    return { label: info.minValue + " - " + info.maxValue, symbol: info.symbol };
                });
                symbols.reverse();

                var infos = [
                    { minAge: 0, maxAge: 1, color: new Color([255, 0, 0]) },
                    { minAge: 1, maxAge: 24, color: new Color([49, 154, 255]) },
                    { minAge: 24, maxAge: Infinity, color: new Color([255, 255, 8]) }
                ];

                var ageSymbols = [];
                ageSymbols.push({ label: "小于1小时", symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([255, 0, 0])).setWidth(10) });
                ageSymbols.push({ label: "1到24小时", symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([49, 154, 255])).setWidth(10) });
                ageSymbols.push({ label: "24小时以上", symbol: new SimpleLineSymbol().setStyle(SimpleLineSymbol.STYLE_SOLID).setColor(new Color([255, 255, 8])).setWidth(10) });

                var legend = new TemplatePicker({
                    items: symbols,
                    rows: 7,
                    columns: 1
                }, "magnitudeDiv");
                legend.startup();
                var legend2 = new TemplatePicker({
                    items: ageSymbols,
                    rows: 3,
                    columns: 1
                }, "ageDiv");
                legend2.startup();

                var ager = new TimeClassBreaksAger(infos, TimeClassBreaksAger.UNIT_HOURS);
                var renderer = new TemporalRenderer(observationRenderer, null, null, ager);
                featureLayer.setRenderer(renderer);
                map.addLayer(featureLayer);
            }

            function featureLayerLoaded(evt) {
                timeSlider = new TimeSlider({ style: "width: 100%;" }, dom.byId("timeSliderDiv"));
                timeSlider.setThumbCount(1);
                timeSlider.createTimeStopsByTimeInterval(evt.layer.getTimeDefinition(), 1, TimeInfo.UNIT_HOURS);
                timeSlider.setThumbIndexes([0]);
                timeSlider.on("time-extent-change", displayTimeInfo);
                timeSlider.startup();
                map.setTimeSlider(timeSlider);
                timeSlider.play();
            }

            function displayTimeInfo(timeExtent) {
                var info = timeExtent.startTime.toDateString() +
                  "   <i>到<\/i>   " +
                  timeExtent.endTime.toUTCString();
                dom.byId("timeInfo").innerHTML = info;
            }
        });
    </script>
</head>
<body class="claro">
    <div id="mainWindow" 
        data-dojo-type="dijit/layout/BorderContainer" 
        data-dojo-propx="design:'sidebar', gutters:true" 
        style="width:100%; height:100%;">
        <div id="header"
            data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region:'top'" 
            class="dijitBorders" style="height:60px;">
            <center>
                <div id="timeInfo" class="labelText"></div>
                <div id="timeSliderDiv" ></div>
            </center>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" 
            data-dojo-props="region:'center'" class="dijitBorders" 
            style="background-color:inherit;">
        </div>
        <div id="right" data-dojo-type="dijit/layout/ContentPane"
            data-dojo-props="region:'right'" 
            style="width:100px;font-size:small;">
            <center><span class="labelText">已发生时间</span></center>
            <div id="ageDiv" class="dijitBorders"></div>
            <center><span class="labelText">等级</span></center>
            <div id="magnitudeDiv" class="dijitBorders" ></div>
        </div>
    </div>
</body>
</html>